<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>断点续传</title>
<link rel="stylesheet" type="text/css"
	href="http://localhost:8080/static/webupload/webuploader.css">
<link rel="stylesheet" type="text/css"
	href="http://localhost:8080/static/webupload/upload.css">
</head>
<body>
	<!-- 断点续传   end-->
	<div id="main">
		<div id="top">
			<div id="picker" class="webuploader-container">
				<div class="webuploader-pick">选择文件</div>
				<div id="rt_rt_1bchdejhrarjdvd11h41eoh1nt1"
					style="position: absolute; top: 0px; left: 0px; width: 88px; height: 35px; overflow: hidden; bottom: auto; right: auto;">
					<input id="file_bp" name="file"
						class="webuploader-element-invisible" type="file" /> <label
						style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255) none repeat scroll 0% 0%;"></label>
				</div>
			</div>
		</div>

		<!--  文件区域 start -->
		<div id="middle" style="overflow:auto">
			<div id="thelist">
			</div>
		</div>
		<!--  文件区域 end -->

		<div id="bottom">
			<button class="btn m-b-xs btn-sm btn-info btn-addon"
				id="startOrStopBtn"
				style="margin-left:735px;height:28px;margin-top:10px;">开始上传</button>
		</div>
	</div>
</body>
<script type="text/javascript"
	src="http://localhost:8080/static/webupload/jquery.min.js"></script>
<script type="text/javascript"
	src="http://localhost:8080/static/webupload/webuploader.min.js"></script>
<script type="text/javascript">
 /*******************初始化参数*********************************/  
    var $list = $('#thelist'),//文件列表  
        $btn = $('#startOrStopBtn'),//开始上传按钮  
        state = 'pending',//初始按钮状态  
        uploader; //uploader对象  
    var fileMd5;  //文件唯一标识  
      
    /******************下面的参数是自定义的*************************/  
    var fileName;//文件名称  
    var oldJindu;//如果该文件之前上传过 已经上传的进度是多少  
    var count=0;//当前正在上传的文件在数组中的下标，一次上传多个文件时使用  
    var filesArr=new Array();//文件数组：每当有文件被添加进队列的时候 就push到数组中  
    var map={};//key存储文件id，value存储该文件上传过的进度
    var md5_map={};//key存储文件id，value存储该文件md5   
    var fileSize = 0;
    
     /***************************************************** 监听分块上传过程中的三个时间点 start ***********************************************************/  
    WebUploader.Uploader.register({    
        "before-send-file":"beforeSendFile",//整个文件上传前  
        "before-send":"beforeSend",  //每个分片上传前  
        "after-send-file":"afterSendFile",  //分片上传完毕  
    },  
    {    
        //时间点1：所有分块进行上传之前调用此函数    
        beforeSendFile:function(file){  
            var deferred = WebUploader.Deferred();    
            fileMd5 = md5_map[file.id];
            deferred.resolve();  
            fileName=file.name; //为自定义参数文件名赋值 
            if(count==0){  
                fileSize = filesArr[0].size;
            }else{  
                if(count<=filesArr.length-1){  
                    fileSize = filesArr[count].size;
                }  
            }  
            return deferred.promise();    
        },    
        //时间点2：如果有分块上传，则每个分块上传之前调用此函数    
        beforeSend:function(block){  
            var deferred = WebUploader.Deferred();  
            var chunkSize = block.end-block.start;
            var chunk = block.chunk;
            $.ajax({    
                type:"POST",    
                url:'../public/verify',  //ajax验证每一个分片  
                data:{    
                    fileName:fileName,
                    fileMd5:fileMd5,  //文件唯一标记    
                    chunk:block.chunk,  //当前分块下标    
                    chunkSize:block.end-block.start,//当前分块大小    
                },    
                cache: false,  
                async: false,  // 与js同步  
                timeout: 1000, //todo 超时的话，只能认为该分片未上传过  
                dataType:"json",    
                success:function(data){    
                    if(data.status==1){  
                        //分块存在，跳过    
                        deferred.reject();    
                    }else{    
                        //分块不存在或不完整，重新发送该分块内容    
                        deferred.resolve();    
                    }    
                }    
            });    
            //设置上传时的参数                   
            this.owner.options.formData.fileMd5 = fileMd5;  
            this.owner.options.formData.chunk =chunk;  
            this.owner.options.formData.fileName =fileName; 
            this.owner.options.formData.fileSize =fileSize;  
            deferred.resolve();    
            return deferred.promise();    
        },    
        //时间点3：所有分块上传成功后调用此函数    
        afterSendFile:function(){  
           count++;
           var  currentFileId;
           if(count==0){  
                currentFileId=filesArr[0].id; 
            }else{  
                if(count<=filesArr.length-1){  
                    currentFileId=filesArr[count].id;  
                }  
            }  
            //继续上传文件
            uploader.upload(currentFileId); 
        }    
    });  
    /***************************************************** 监听分块上传过程中的三个时间点 end **************************************************************/  
      
    /************************************************************ 初始化WebUploader start ******************************************************************/  
    uploader = WebUploader.create({  
        auto:false,//选择文件后是否自动上传  
        chunked: true,//开启分片上传  
        chunkSize:5*1024*1024,// 如果要分片，分多大一片？默认大小为5M  
        chunkRetry: 3,//如果某个分片由于网络问题出错，允许自动重传多少次  
        threads: 1,//上传并发数。允许同时最大上传进程数[默认值：3]  
        duplicate : false,//是否重复上传（同时选择多个一样的文件），true可以重复上传  
        prepareNextFile: true,//上传当前分片时预处理下一分片  
        swf: 'http://localhost:8080/static/swf/WebSocketMain.swf',// swf文件路径    
        server: '../public/upload',// 文件接收服务端  
        fileSizeLimit:6*1024*1024*1024,//6G 验证文件总大小是否超出限制, 超出则不允许加入队列  
        fileSingleSizeLimit:3*1024*1024*1024,  //3G 验证单个文件大小是否超出限制, 超出则不允许加入队列  
        pick: {  
                id: '#picker', //这个id是你要点击上传文件按钮的外层div的id  
                multiple : false //是否可以批量上传，true可以同时选择多个文件  
        },    
        resize: false,  //不压缩image, 默认如果是jpeg，文件上传前会先压缩再上传！  
        accept: {    
                //允许上传的文件后缀，不带点，多个用逗号分割  
            extensions: "txt,jpg,jpeg,bmp,png,zip,rar,war,pdf,cebx,doc,docx,ppt,pptx,xls,xlsx",    
            mimeTypes: '.txt,.jpg,.jpeg,.bmp,.png,.zip,.rar,.war,.pdf,.cebx,.doc,.docx,.ppt,.pptx,.xls,.xlsx',    
        }    
    });    
    /************************************************************ 初始化WebUploader end ********************************************************************/  
      
    //当有文件被添加进队列的时候（点击上传文件按钮，弹出文件选择框，选择完文件点击确定后触发的事件）    
    uploader.on('fileQueued', function(file) {  
        //限制单个文件的大小 超出了提示  
        if(file.size>3*1024*1024*1024){  
            alert("单个文件大小不能超过3G");  
            return false;  
        }  
          
        /*************如果一次只能选择一个文件，再次选择替换前一个，就增加如下代码*******************************/  
        //清空文件队列  
        /* $list.html("");  
        //清空文件数组  
        filesArr=[];  */ 
        /*************如果一次只能选择一个文件，再次选择替换前一个，就增加以上代码*******************************/  
          
        //将选择的文件添加进文件数组  
        filesArr.push(file);  
        
        //获取文件的md5值
        uploader.md5File( file.source, 0, 1 )
        // 及时显示进度
        .progress(function(percentage) {
           //计算md5的进度
        })
        // 完成
        .then(function(val) {
            console.log('md5 result:', val);
            md5_map[file.id] = val;//存储文件的md5值
        $.ajax({    
            type:"POST",    
            url:'../public/is_upload',  //先检查该文件是否上传过，如果上传过，上传进度是多少  
            data:{    
                fileMd5 : val,  //文件的md5值是文件的唯一标志  
                fileSize:file.size,
                fileName:file.name
            },    
            cache: false,  
            async: false,  // 同步  
            dataType:"json",    
            success:function(data){    
                //上传过  
                if(data>0){  
                    //上传过的进度的百分比  
                    oldJindu=data/100;  
                    var html = '<div class="file_item" id="' + file.id + '"><table style="width:100%;"><tr><td style="width:75%;">'+file.name+'</td><td style="width:15%"><p class="state">已上传：'+data+'%<p></td><td style="width:10%"><a href="javascript:void(0);" class="btn btn-primary file_btn btnRemoveFile">删除</a></td></tr></table></div>';
                    $list.append(html);  
                    //将上传过的进度存入map集合  
                    map[file.id]=oldJindu;  
                }else{//没有上传过  
                     var html='<div class="file_item" id="' + file.id + '"><table style="width:100%;"><tr><td style="width:75%;">'+file.name+'</td><td style="width:15%"><p class="state">等待上传...<p></td><td style="width:10%"><a href="javascript:void(0);" class="btn btn-primary file_btn btnRemoveFile">删除</a></td></tr></table></div>';
                     $list.append( html); 
                }    
            }    
        });  
        uploader.stop(true);  
        //删除队列中的文件  
        $(".btnRemoveFile").bind("click", function() {  
           //按照上面的html 获取到文件id;
            var fileItem = $(this).parent().parent().parent().parent().parent();  
            uploader.removeFile($(fileItem).attr("id"), true);  
            $(fileItem).fadeOut(function() {  
                $(fileItem).remove();  
            });  
          
            //数组中的文件也要删除  
            for(var i=0;i<filesArr.length;i++){  
                if(filesArr[i].id==$(fileItem).attr("id")){  
                    filesArr.splice(i,1);//i是要删除的元素在数组中的下标，1代表从下标位置开始连续删除一个元素  
                }  
            }  
        });  
            
        });
  
  
    });    
           
    //文件上传过程中创建进度条实时显示  
    uploader.on('uploadProgress', function(file, percentage) {  
        var $li = $('#'+file.id );
          
        //根据fielId获得当前要上传的文件的进度  
        var oldJinduValue = map[file.id];
        
        console.log($li.find('state').text());
          
        if(percentage<oldJinduValue && oldJinduValue!=1){  
            $li.find('.state').text('已上传：'+Math.round(oldJinduValue * 100) + '%');  
        }else{  
            $li.find('.state').text('已上传：'+Math.round(percentage * 100) + '%');  
        }  
    });    
      
    //上传成功后执行的方法  
    uploader.on('uploadSuccess', function( file ) {    
        //上传成功去掉进度条  
        $('#'+file.id).find('.progress').fadeOut();  
        //隐藏删除按钮  
        $(".btnRemoveFile").hide();  
        
    });    
      
    //上传出错后执行的方法  
    uploader.on('uploadError', function( file ) {  
        errorUpload=true;  
        $btn.text('开始上传');  
        uploader.stop(true);  
        $('#'+file.id).find('p.state').text('上传出错，请检查网络连接');  
    });    
        
    //文件上传成功失败都会走这个方法  
    uploader.on('uploadComplete', function( file ) {  
          
    });    
      
    uploader.on('all', function(type){  
        if (type === 'startUpload'){  
            state = 'uploading';  
        }else if(type === 'stopUpload'){  
            state = 'paused';  
        }else if(type === 'uploadFinished'){  
            state = 'done';  
        }  
  
        if (state === 'uploading'){  
            $btn.text('暂停上传');  
        } else {  
            $btn.text('开始上传');  
        }  
    });  
  
    //上传按钮的onclick时间  
    $btn.on('click', function(){  
    
        if (state === 'uploading'){  
            uploader.stop(true);  
        } else {  
            //当前上传文件的大小  
            var currentFileSize;  
            //当前上传文件的文件id  
            var currentFileId;  
            //当前上传文件的名字
            var currentFileName;  
            //count=0 说明没开始传 默认从文件列表的第一个开始传  
            if(count==0){  
                currentFileSize=filesArr[0].size;  
                currentFileId=filesArr[0].id; 
                currentFileName =  filesArr[0].name;
            }else{  
                if(count<=filesArr.length-1){  
                    currentFileSize=filesArr[count].size;  
                    currentFileId=filesArr[count].id;  
                    currentFileName =  filesArr[count].name;
                }  
            }  
             var md5_val = md5_map[currentFileId];
             console.log("md5_val"+md5_val);
              
            //先查询该文件是否上传过 如果上传过已经上传的进度是多少  
             $.ajax({    
                type:"POST",    
                url:'../public/is_upload',    
                data:{    
                    fileMd5 : md5_val,
                    fileSize:currentFileSize,
                    fileName:currentFileName
                },    
                cache: false,  
                async: false,  // 同步  
                dataType:"json",    
                success:function(data){    
                    //如果上传过 将进度存入map  
                    if(data>0){  
                        map[currentFileId]=data/100;  
                    }  
                     //执行上传  
                     uploader.upload(currentFileId); 
                }    
            }); 
        }  
    });  

</script>
</html>